<template>
    <el-popover
            placement="bottom-start"
            width="540"
            trigger="click"
            @show="reset"
            popper-class="popper-class"
    >   
        <el-tabs v-model="activeName" @tab-click="activeTab">
            <el-tab-pane label="Font-Awesome" name="font-awesome">
                <div class="ui-fas" v-if="mode === 'default'">
                    <el-input class="fas-icon-input" v-model="name" @input.native="filterIcons" suffix-icon="el-icon-search" placeholder="请输入图标名称"></el-input>
                    <div class="icon-list">
                        <ul class="fas-icon-ul">
                            <li v-for="(item, index) in fontawesome" :key="index" @click="selectedIcon(item)">
                                <i class="fas" :class="['fa-' + item]" />
                                <span>{{item}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="ui-pupop" v-else>
                    <el-scrollbar
                            :native="false"
                            :noresize="false"
                            class="icon-list"
                            >
                            <!-- 图标项 -->
                            <div
                                class="icon-item"
                                v-for="(item, index) in fontawesome"
                                :key="index"
                                @click="selectedIcon(item)">
                                <i class="fas" :class="['fa-' + item]"></i>
                            </div>
                            </el-scrollbar>
                </div>
            </el-tab-pane>
            <el-tab-pane label="ElementUiIcon" name="elementui">
                <div class="ui-fas" v-if="mode === 'default'">
                    <el-input class="fas-icon-input" v-model="name" :value="name" @input.native="filterIcons" suffix-icon="el-icon-search" placeholder="请输入图标名称"></el-input>
                    <div class="icon-list">
                        <ul class="fas-icon-ul">
                            <li v-for="(item, index) in elementui" :key="index" @click="selectedIcon(item)">
                                <i :class="item" />
                                <span>{{item}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="ui-pupop" v-else>
                    <el-scrollbar
                            :native="false"
                            :noresize="false"
                            class="icon-list"
                            >
                            <!-- 图标项 -->
                            <div
                                class="icon-item"
                                v-for="(item, index) in elementui"
                                :key="index"
                                @click="selectedIcon(item)">
                                <i :class="item"></i>
                            </div>
                            </el-scrollbar>
                </div>
            </el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
        
        <template slot="reference">
            <div v-if="mode === 'default'">
                <div class="el-select">
                    <el-input placeholder="请输入内容" v-model="menu_icon">
                        <template slot="prepend"><i class="fas" :class="menu_icon ? menu_icon : defaultIcon"></i></template>
                    </el-input>
                </div>
            </div>
            <div v-else>
                <div class="select-buttom">
                     <!-- 显示图标 -->
                    <div class="icon-item">
                        <i class="fas" :class="menu_icon ? menu_icon : defaultIcon"></i>
                    </div>
                    <!-- 清空按钮 -->
                    <div v-show="menu_icon" class="btn-clear">
                        <i class="el-icon-close" @click.stop="onClickClear()"></i>
                    </div>
                </div>
               
            </div>
        </template>
    </el-popover>
</template>

<script>

    import fontawesome from '../mock/font-awesome'
    import elementui from '../mock/elementui'
    export default {
        name: "IconSelect",
        data () {
            return {
                name: '',
                menu_icon:'',
                activeName:'font-awesome',
                fontawesome:fontawesome,
                elementui:elementui,
                fontawesomeData:fontawesome,
                elementuiData:elementui
            }
        },
        props: {
            disabled: {
                type:Boolean,
                default:false
            },
            mode:{
                type:String,
                default:'other'
            },
            defaultIcon:{
                type:String,
                default:'el-icon-plus'
            }
        },
        computed: {

        },
        methods: {
            filterIcons () {
                if (this.name) {
                    switch(this.activeName){
                        case 'font-awesome':
                            this.fontawesome = this.fontawesomeData.filter(item => item.includes(this.name))
                            break;
                        case 'elementui':
                            
                            this.elementui = this.elementuiData.filter(item => item.includes(this.name))
                            // let array = [];
                            // this.elementuiData.forEach((item,key) => {
                            //     if(item.indexOf(this.name)){
                            //         array.push(item)
                            //     }
                            // })
                            // this.elementui = array
                            break;
                    }
                } else {
                    switch(this.activeName){
                        case 'font-awesome':
                            this.fontawesome = this.fontawesomeData
                            break;
                        case 'elementui':
                            this.elementui = this.elementuiData
                            break;
                    }
                    this.iconList = fontawesome
                }
            },
            selectedIcon (name) {
                if(this.activeName === 'font-awesome'){
                    this.menu_icon = 'fas fa-'+name;
                    this.$emit('selected', 'fas fa-'+name)
                }else{
                    this.menu_icon = name;
                    this.$emit('selected', name)
                }
               
                document.body.click()
            },
            onClickClear() {
                this.menu_icon = null;
                this.$emit('selected', '');
            },
            reset () {
                this.name = '';
                this.iconList = fontawesome
            },
            activeTab(event){
                this.activeName = event.name
            }
        }
    }
</script>

<style lang="less">
    @size:38px;
    @scope-size:5px;
    .flex-center{
        display: flex;
        display: -webkit-flex;
        align-items:center;
        justify-content:center;
    }

    .el-select .el-input {
        width: 250px;
        &.el-input-group{
            display: inline-table !important;
        }
    }
    .el-select .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .select-buttom{
          width: @size -2;
          height: @size -2;
          overflow: hidden;  
         
        .btn-clear {
            width: 0;
            height: 0;
            border-width: (@size / 2) 0 0 (@size / 2);
            border-style: solid;
            border-color: #CD3333 transparent transparent transparent;
            position: relative;
            top: -40px;
            right: -20px;
            cursor: pointer;
            i.el-icon-close {
                position: absolute;
                top: -(@size / 2);
                right: 0;
                color: #fff;
                font-size: .7em;
                &:hover { color: darken(#fff, 5%); }
            }
        }
    }
    
    .icon-item {
            width: @size;
            height: @size;
            line-height: @size;
            text-align: center;
            cursor: pointer;
            border:1px solid #eff2f6;
            border-radius: 5px;
            &:hover {
                border:1px solid #DCDFE6;
            }
            .flex-center
            i {
                width: 36px;
                height: 36px;
                display: block;
                line-height: size - (@scope-size * 2);
                color: #78a5f1;
            }
        }

    .ui-pupop {
        height: 550px;
        overflow: hidden;
        .el-scrollbar__wrap{overflow-x:hidden;}
        .icon-list{
             height: 100%;
            .icon-item{
                display: inline-block;
                margin: 5px 5px 0 0;
            }
        }
        
    }
    .ui-fas {
        height: 550px;
        overflow: hidden;
        .fas-icon-input {
            width: 60%;
        }
        .icon-list{
            overflow: scroll;
            margin-top: 10px;
            .fas-icon-ul {
                height: 500px;
                width: 100%;
                list-style-type: none;
                -webkit-padding-start: 0 !important;
                li {
                    width: 50%;
                    display: inline-block;
                    height: 24px;
                    padding: 10px 0;
                    i {
                        font-size: 22px;
                        margin-right: 10px;
                    }
                    span {
                        font-size: 14px;
                        line-height: 24px;
                    }
                }
            }
        }

    }
</style>